<template>
    <div id="waterCountStat">
      <!-- 计算送水数量列表 -->
      <div id="waterCountStatList">
          <el-table :data="waterCountStatList" stripe style="width: 100%">
              <el-table-column  type = "index"></el-table-column>
              <el-table-column  prop = "workerName" label="送水工名称" align="center"></el-table-column>
              <el-table-column  prop = "custDetails" label="客户明细信息" align="center"></el-table-column>
              <el-table-column  label="送水数量" align="center">
                  <template v-slot="scope">
                      <!-- 条件成立：表示送水数量不为空，正常显示送水数量。否则：送水数量为0 -->
                      {{scope.row.sendWaterCount ? scope.row.sendWaterCount : 0}}
                  </template>
              </el-table-column>
        </el-table>
      </div>
  
      <!-- 分页组件 -->
      <div id="page">
        <!-- 
          @size-change 每页条数发送变化事件  重要
          @current-change 当前页码发生变化事件 重要
          current-page属性表示当前页码 重要
          page-sizes 每页条数数组
          page-size 每页条数 重要
          layout 分页组件布局
          total 总记录数 重要
         -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 3, 5, 10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import Moment from 'moment'
  
  export default {
      data() {
          return {
              // 存储后端响应的“送水数量列表”
              waterCountStatList: [],
              pageNum: 1,
              pageSize: 5,
              total: 0,
          }
      },
      methods: {
          /**
           * 每页数量（条数）发生改变事件对应的处理函数
           * 步骤：
           * 1 将val参数赋值给pageSize(注意：val表示最新的每页条数)
           * 2 将pageNum设置为1（每页条数发生改变，默认显示第一页）
           * 3 重新查询送水工工资列表信息
           */
          handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
              this.pageSize = val;
              this.pageNum = 1;
              this.listWaterCountStatByPage();
          },
          /**
           * 当前页码发生改变的事件处理函数
           * 步骤：
           * 1 将val参数赋值给pageNum（注意：val表示最新的当前页码）
           * 2 重新查询送水工工资列表信息
           */
          handleCurrentChange(val) {
              console.log(`当前页: ${val}`);
              this.pageNum = val;
              this.listWaterCountStatByPage();
          },
          /**
           * 使用axios向后端发起计算水数请求
           */
          listWaterCountStatByPage() {
              this.$axios.post('http://localhost:8091/stat/listWorkerSendWaterCount',{
                  pageNum: this.pageNum,
                  pageSize: this.pageSize           
              })
              .then(resp=>{
                  const code = resp.data.code;
                  console.log(resp);
                  // 条件成立：表示后端响应成功，获取后端返回的送水工工资列表和总条数
                  if (code === 200) {
                      this.waterCountStatList = resp.data.data.records;
                      console.log(this.waterCountStatList);
                      this.total = resp.data.data.total;
                  } else {
                      this.$message.error("没有查询到送水数量");
                  }
              })
              .catch(err=>{
                  this.$message.error("统计送水数量请求失败",err);
                  console.log("统计送水数量请求失败",err);
              })
          }
      },
      created() {
          this.listWaterCountStatByPage()
      },    
  
  }
  </script>
  
  <style>
  
  </style>